<template>
  <div :class="btnClass" :style="btnStyle" @click="yuBtnClick">
    <slot></slot>
  </div>
</template>

<script setup lang="ts">
defineOptions({ name: 'yu-button' })
import { reactive, withDefaults } from 'vue'
import { type Size } from '@/views/package/types/button'
import { throttle } from '@/views/package/utils/common'
const props = withDefaults(
  defineProps<{
    size?: Size
    bgColor?: string
    textColor?: string
    circle?: boolean
    throttleTime?: number
  }>(),
  {
    size: 'medium',
    bgColor: '#efada1',
    textColor: '#fff',
    circle: false,
    throttleTime: 0,
  }
)
const btnClass = reactive({
  'yu-button': true,
})
const btnStyle = reactive({
  'background-color': props.bgColor,
  color: props.textColor,
})
btnClass['btn' + props.size] = true
const sizeList = {
  large: 46,
  medium: 36,
  small: 30,
  mini: 26,
}
if (props.circle) {
  btnStyle['border-radius'] = sizeList[props.size] + 'px'
}
const emit = defineEmits(['click'])
const yuBtnClick = throttle(function () {
  emit('click')
}, props.throttleTime)
</script>

<style scope>
.yu-button {
  display: inline-block;
  border-radius: 3px;
  text-align: center;
  cursor: pointer;
  letter-spacing: 2px;
}
.btnlarge {
  height: 46px;
  padding: 0 25px;
  font-size: 15px;
  line-height: 46px;
}
.btnmedium {
  height: 36px;
  padding: 0 20px;
  font-size: 15px;
  line-height: 36px;
}
.btnsmall {
  height: 30px;
  padding: 0 15px;
  font-size: 13px;
  line-height: 30px;
}
.btnmini {
  height: 26px;
  padding: 0 10px;
  font-size: 12px;
  line-height: 26px;
}
</style>